import React, { useEffect, useState } from 'react'
import { Flex } from 'react-vant'
import { Edit, Search, ArrowDown } from '@react-vant/icons'
import './index.less'

const Index = props => {
  const [tabIndex, setIndex] = useState(0)

  const [moreMenu, setMore] = useState(false)

  const tabClick = (ele, idx) => {
    console.log(ele,idx);
    setMore(false)
    setIndex(idx)
  }

  const clickMoreMenu = () => {
    setMore(!moreMenu)
  }

  return (
    <div className="lite-topbar main-top">
      <div className="nav-top">
        <div className="nav-left logo"></div>
        <a href="#" className="nav-search unlogin-search">
          <aside>
            <label className="m-search">
              <Search className="m-font" />
              <div className="m-text-cut">
                大家都在搜：{props.table.hot && props.table.hot.hotWord}
              </div>
            </label>
          </aside>
        </a>
        <div className="nav-right">
          <Edit className="lite-iconf-releas" />
        </div>
      </div>
      <div className="nav-main">
        <div className="m-box">
          <div className="m-box-col inner-box">
            <div className="scroll-box slide-container">
              <div className="slide-wrap">
                <ul className="nav_item">
                  {props.table.channel &&
                    props.table.channel.map((ele, idx) => {
                      return (
                        <li
                          className={[
                            'item_li',
                            idx == tabIndex ? ' cur' : ''
                          ].join('')}
                          onClick={() => tabClick(ele, idx)}
                          key={ele.gid}
                        >
                          <span>
                            {ele.name}
                            <em></em>
                          </span>
                        </li>
                      )
                    })}
                </ul>
              </div>
              {moreMenu ? (
                <div className="lite-nav-sublist">
                  <Flex className="m-auto-list" direction="row" wrap={'wrap'}>
                    {props.table.channel &&
                      props.table.channel.map((ele, idx) => {
                        return (
                          <Flex.Item
                            span={6}
                            className={[
                              'm-auto-box',
                              idx == tabIndex ? ' cur' : ''
                            ].join('')}
                            onClick={() => tabClick(ele, idx)}
                            key={ele.gid}
                          >
                            <span className="m-text-cut">{ele.name}</span>
                          </Flex.Item>
                        )
                      })}
                  </Flex>
                </div>
              ) : null}
            </div>
          </div>
          <div className="nav-plus m-box-center m-box-center-a">
            <ArrowDown
              onClick={clickMoreMenu}
              rotate={moreMenu ? 180 : 0}
              className="m-font-arrow-down"
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
